<template>
  <div class="container">
    <el-card>
      <div>
        <avue-crud
          :option="option"
          :table-loading="loading"
          :data="data"
          :page="page"
          v-model="form"
          ref="crud"
          @row-update="rowUpdate"
          @row-save="rowSave"
          @row-del="rowDel"
          @search-change="searchChange"
          @search-reset="searchReset"
          @selection-change="selectionChange"
          @current-change="currentChange"
          @size-change="sizeChange"
          @refresh-change="refreshChange"
          @on-load="onLoad"
        >
          <template slot="menuLeft">
            <el-row :gutter="10">
              <el-col :span="8">
                <div>
                  <el-input size="mini" v-model="search.roomName" placeholder="请输入房间信息"></el-input>
                </div>
              </el-col>
              <el-col :span="6">
                <div class="lab">是否欠费 :</div>
                <div class="ipt" style="margin-left:60px;">
                  <el-select size="mini" v-model="search.isArrears" placeholder="请选择">
                    <el-option label="已欠费" :value="2"></el-option>
                    <el-option label="未欠费" :value="1"></el-option>
                  </el-select>
                </div>
              </el-col>
              <el-col :span="10">
                <el-button type="primary" size="mini" @click="searchList">搜索</el-button>
                <el-button type="primary" size="mini" @click="clearSearch">清空</el-button>
                <el-button type="primary" size="mini" @click="getExcel">导出</el-button>
                <el-button type="primary" size="mini" @click="rowCall('all')">批量催缴</el-button>
              </el-col>
            </el-row>
          </template>
          <template slot-scope="{type,size, row}" slot="menu">
            <el-button :size="size" :type="type" @click="rowCall(row)">催缴</el-button>
          </template>
        </avue-crud>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getList, setUrgecharge } from "@/api/contract/balance";
export default {
  name: "balance",
  data() {
    return {
      search: {},
      loading: true,
      page: {
        currentPage: 1,
        total: 0,
        pageSize: 10,
      },
      changelist: [],
      data: [],
      option: {
        selection: true,
        menuWidth: 100,
        align: "center",
        addBtn: false,
        editBtn: false,
        delBtn: false,
        viewBtn: false,
        menuAlign: "center",
        refreshBtn: false,
        columnBtn: false,
        column: [
          // {
          //   label: "卡ID",
          //   prop: "accountId",
          // },
          // {
          //   label: "卡类型",
          //   prop: "accountType",
          // },
          {
            label: "房间信息",
            prop: "roomName",
          },
          {
            label: "租客名",
            prop: "nickName",
          },
          {
            label: "手机号",
            prop: "mobile",
          },
          {
            label: "卡余额",
            prop: "balance",
          },
          {
            label: "是否欠费",
            prop: "isArrears",
            dicData: [
              {
                label: "未欠费",
                value: 1,
              },
              {
                label: "已欠费",
                value: 2,
              },
            ],
          },
          {
            label: "合约类型",
            prop: "contractType",
            type: "select",
            dicData: [
              {
                label: "预付费",
                value: 1,
              },
              {
                label: "后付费",
                value: 2,
              },
            ],
          },
          // {
          //   label: "透支额度",
          //   prop: "overAmount",
          // },
          {
            label: "是否已催缴",
            prop: "isUrgeRecharge",
            type: "select",
            dicData: [
              {
                label: "已经催缴",
                value: 1,
              },
              {
                label: "未催缴",
                value: 2,
              },
            ],
            // renderHeader: (h, { column, $index }) => {
            //   return h("span", [
            //     h("spam", column.label),
            //     h("<i class=el-icon-delete></i>"),
            //   ]);
            // },
          },
        ],
      },
    };
  },
  mounted() {},
  watch: {},
  methods: {
    selectionChange(list) {
      this.changelist = list;
    },
    rowCall(row) {
      // 催缴
      const { devType } = this;
      if (row === "all" && this.changelist.length <= 0) {
        this.$message({
          type: "warning",
          message: "请至少选择一项!",
        });
        return false;
      }
      this.$confirm("确定催缴?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        beforeClose: (action, instance, done) => {
          if (action === "confirm") {
            instance.confirmButtonLoading = true;
            instance.confirmButtonText = "催缴中...";
            let ids = [];
            if (row === "all") {
              // 批量删除
              this.changelist.forEach((item) => {
                ids.push(item.id);
              });
            } else {
              ids.push(row.id);
            }
            return setUrgecharge(ids.join(","))
              .then(() => {
                instance.confirmButtonLoading = false;
                this.onLoad(this.page);
                this.$message({
                  type: "success",
                  message: "操作成功!",
                });
                done();
              })
              .catch(() => {
                instance.confirmButtonLoading = false;
                done();
              });
          } else {
            done();
          }
        },
      });
    },
    clearSearch() {
      this.search = {};
      this.onLoad(this.page);
    },
    searchList() {
      this.onLoad(this.page);
    },
    getExcel() {
      this.$refs.crud.rowExcel();
    },
    sizeChange(val) {
      this.page.currentPage = 1;
      this.page.pageSize = val;
      this.getList();
      this.$message.success("行数" + val);
    },
    currentChange(val) {
      this.page.currentPage = val;
      this.getList();
      this.$message.success("页码" + val);
    },
    onLoad(page, params = {}) {
      const { search } = this;
      this.loading = true;
      getList(
        page.currentPage,
        page.pageSize,
        Object.assign(params, this.query, search)
      ).then((res) => {
        const data = res.data.data;
        this.page.total = data.total;
        this.data = data.records;
        this.loading = false;
        this.$refs.crud && this.$refs.crud.selectClear();
      });
    },
  },
};
</script>

<style scoped lang='scss'>
.lab {
  float: left;
  font-size: 12px;
  margin-top: 5px;
}

.ipt {
  margin-left: 50px;
}
</style>
